<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋在线对战 - 游戏中</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.6.1/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
</head>
<body>
    <div class="game-container">
        <!-- 游戏信息栏 -->
        <div class="game-info-bar">
            <div class="player-info" id="blackPlayerInfo">
                <div class="player-color black"></div>
                <div>
                    <div class="player-name" id="blackPlayerName">-</div>
                    <div class="player-score" id="blackPlayerScore">积分: 0</div>
                </div>
            </div>
            
            <div class="turn-indicator" id="turnIndicator">
                等待游戏开始...
            </div>
            
            <div class="player-info" id="whitePlayerInfo">
                <div class="player-color white"></div>
                <div>
                    <div class="player-name" id="whitePlayerName">-</div>
                    <div class="player-score" id="whitePlayerScore">积分: 0</div>
                </div>
            </div>
        </div>

        <!-- 游戏主体内容 -->
        <div class="game-content">
            <div class="board-container">
                <div class="game-board">
                    <div class="board-grid" id="gameBoard">
                        <!-- 棋盘格子将由JavaScript动态生成 -->
                    </div>
                </div>
                
                <!-- 游戏控制面板 -->
                <div class="game-controls">
                    <h3>游戏控制</h3>
                    <div class="game-timer" id="gameTimer">00:00</div>
                    
                    <!-- 添加调试信息显示 -->
                    <div class="debug-info" id="debugInfo" style="margin: 10px 0; padding: 10px; background: #f5f5f5; border-radius: 5px; font-size: 12px;">
                        <div><strong>调试信息:</strong></div>
                        <div id="debugCurrentTurn">当前回合: -</div>
                        <div id="debugMyColor">我的颜色: -</div>
                        <div id="debugIsMyTurn">是否轮到我: -</div>
                        <div id="debugWebSocketStatus">WebSocket: -</div>
                        <div id="debugLastUpdate">最后更新: -</div>
                    </div>
                    
                    <div class="game-status" id="gameStatus">
                        <div class="status-message status-info">
                            <span id="connectionText">连接中...</span>
                            <span class="loading" id="connectionLoading"></span>
                        </div>
                    </div>
                    
                    <button class="btn btn-danger" id="surrenderBtn" onclick="surrender()" style="display: none;">
                        认输
                    </button>
                    
                    <button class="btn btn-secondary" id="refreshBtn" onclick="refreshGameState()" style="margin-top: 5px;">
                        刷新状态
                    </button>
                    
                    <button class="btn btn-primary" id="backToHallBtn" onclick="backToHall()" style="display: none;">
                        返回大厅
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 游戏结果弹窗 -->
    <div class="game-result-overlay" id="gameResultOverlay" style="display: none;">
        <div class="game-result">
            <div class="result-title" id="resultTitle">游戏结束</div>
            <div class="score-change" id="scoreChange">+0分</div>
            <div class="current-score" id="currentScore">当前积分：0</div>
            <button class="btn btn-primary" onclick="backToHall()">返回大厅</button>
        </div>
    </div>

    <script src="game.js"></script>
</body>
</html> 